<template>
  <div class="subcard-detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          积分场景管理详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          编号：{{ activity.activityCode }}
        </Col>
        <Col span="12" class="detail-table__col">
          活动名称：{{ activity.keyName }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          开始时间：{{ (activity.activityStart || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          结束时间：{{ (activity.activityEnd || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <Row v-if="type == 4">
        <Col span="12" class="detail-table__col">
          面向渠道：{{ activity.channel | getChannelsName }}
        </Col>
        <Col span="12" class="detail-table__col">
          面向品牌：{{ activity.brandIds | getBrandsName }}
        </Col>
      </Row>
      <Row>
        <Col :span="12" class="detail-table__col" v-if="type == 4">
          适用产品：{{ activity.categorys | getCategorysName }}
        </Col>
        <Col :span="type == 4 ? 12 : 24" class="detail-table__col">
          活动状态：{{ getEnumsName(activity.activityStatus, statusList) }}
        </Col>
      </Row>
      <Row v-if="index%2==0" v-for="(rule,index) in ruleList" :key="index">
        <Col span="12" class="detail-table__col">
          <span v-if="type == 4">{{ruleList[index].configKey}}等级：1</span><span v-if="type == 5">{{ruleList[index].configKey | getMessageName}}</span>：{{ruleList[index].configValue}}<span v-if="type==5">积分</span>
        </Col>
        <Col span="12" class="detail-table__col" v-if="ruleList[index+1]">
          <span v-if="type == 4">{{ruleList[index+1].configKey}}等级：1</span><span v-if="type == 5">{{ruleList[index+1].configKey | getMessageName}}</span>：{{ruleList[index+1].configValue}}<span v-if="type==5">积分</span>
        </Col>
        <Col span="12" class="detail-table__col" v-if="!ruleList[index+1]">
        <span v-if="type == 5" style="word-break:break-all;">标签：{{tagList}}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建时间：{{ (activity.createTime || '').replace(/-/g, '/') }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑时间：{{ (activity.updateTime || '').replace(/-/g, '/') }}
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          创建人：{{ activity.creatorName }}
        </Col>
        <Col span="12" class="detail-table__col">
          编辑人：{{ activity.operatorName }}
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <table>
            <tr>
              <td width="62" valign="top">活动说明：</td>
              <td style="word-break:break-all;">{{ activity.explains }}</td>
            </tr>
          </table>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryPoint } from '@/api/market/point.js'
import { getBrandList, getTagList } from '@/api/merchant.js'
import enumsMixin from '../enums.js'
let that
export default {
  name: 'market_point_detail',
  mixins: [enumsMixin],
  data () {
    return {
      id: '',
      type: '',
      activity: {},
      ruleList: [],
      brandList: [],
      definedTagList: []
    }
  },
  beforeCreate: function () {
    that = this
  },
  mounted () {
    this.id = this.$route.params.id
    this.type = parseInt(this.$route.query.type)
    this.getDetail()
    if (parseInt(this.type) === 4) {
      getBrandList({
        merchantId: this.merchantId
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.brandList = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    } else {
      this.getTagList()
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    }),
    tagList () {
      return this.definedTagList.map(item => {
        return item.itemName
      }).join(',')
    }
  },
  filters: {
    getChannelsName (value) {
      if (value) {
        let arr = value.split(',')
        return arr.map((value) => {
          const result = that.channelList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    },
    getBrandsName (value) {
      if (value) {
        let arr = value.split(',')
        return arr.map((value) => {
          const result = that.brandList.filter(item => item['brandId'] === value)
          return result[0] ? result[0]['brandName'] : ''
        }).join(',')
      }
      return ''
    },
    getCategorysName (value) {
      if (value) {
        let arr = value.split(',')
        return arr.map((value) => {
          const result = that.categoryList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join(',')
      }
      return ''
    },
    getMessageName (value) {
      const result = that.memberMessageList.filter(item => item['key'] === value)
      return result[0] ? result[0]['label'] : ''
    }
  },
  methods: {
    getTagList () {
      getTagList({
        merchantId: this.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.definedTagList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getDetail () {
      queryPoint({
        activityIntegerId: this.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.activity = result.data.rewardPointsActivity
          this.ruleList = result.data.rewardPointsRule
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>
<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.subcard-detail {
  padding: 40px 80px
}
</style>
